<template>
  <view>
    <u-tabbar v-model="current" :list="tabBarList" :active-color="activeColor" :inactive-color="inactiveColor" style="position: absolute;"
        :border-top="borderTop" />
    <button @click="showMessage">显示消息</button>
    <MessagePopup v-if="showPopup" :message="popupMessage" />
    
  </view>
</template>

<script>

export default {
  onLoad() {
      this.tabBarList = this.vuex_tabbar
  },
  data() {
    return {
      showPopup: false,
      popupMessage: '这是一条消息', // 消息内容
      title: '首页', // 导航栏的标题，这会显示在页面的顶部或作为当前视图的标题
      		 tabBarList: [], // 导航栏的列表项，来源于Vuex状态管理中的dynamicTabbar
               current: 0, // 当前激活的导航项的索引，0表示第一个导航项
               borderTop: true, // 控制是否有顶部边框，true表示有边框
               inactiveColor: '#909399', // 未激活的TabBarItem的颜色
               activeColor: '#5098FF' // 激活的TabBarItem的颜色	
    };
  },
  methods: {
    showMessage() {
      this.showPopup = true; // 显示消息弹窗
      setTimeout(() => {
        this.showPopup = false; // 3秒后隐藏消息弹窗
      }, 3000);
    },
  },
};
</script>
